<template>
  <van-tabbar v-model="active" :placeholder="true" :safe-area-inset-bottom="true">
    <van-tabbar-item
      v-for="item in tabbarItems"
      :key="item.name"
      :icon="item.icon"
      :to="item.path"
    >
      {{ item.label }}
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { useRoute } from 'vue-router'

interface TabbarItem {
  name: string
  label: string
  icon: string
  path: string
}

const route = useRoute()
const active = ref(0)

const tabbarItems: TabbarItem[] = [
  {
    name: 'home',
    label: '首页',
    icon: 'home-o',
    path: '/'
  },
  {
    name: 'profile',
    label: '我的',
    icon: 'user-o',
    path: '/profile'
  }
]

// 根据当前路由设置活跃tab
const setActiveTab = () => {
  const currentPath = route.path
  const index = tabbarItems.findIndex(item => item.path === currentPath)
  if (index !== -1) {
    active.value = index
  }
}

// 监听路由变化
watchEffect(() => {
  setActiveTab()
})
</script>

<style scoped>
:deep(.van-tabbar-item__icon) {
  font-size: 22px;
}

:deep(.van-tabbar-item__text) {
  font-size: 12px;
}
</style>